<template>
	<view class="box">
		<template v-if="type==1">
			<view class="nav flex">
				<view v-for="(item,index) of nav_list" :key="index" @click="checkNav(index)">
					<view class="f32 c999 title" :class="active===index?'show':''">
						{{item}}
						<view class="nav-tag"></view>
					</view>

				</view>
			</view>
			<view class="card" v-for="(item,index) of list" :key="index">
				<view class="fw-bt">
					<view class="f28 bold">{{item.title}}</view>
					<view class="bold f32">{{item.pm==1?'+':'-'}}{{item.number}}</view>
				</view>
				<view class="two fw-bt f24">
					<view class="c999">{{item.create_time}}</view>
					<view class="status c999">订单实际总金额</view>
				</view>
				<view class="four fw-bt f24" v-if="active==1">
					<view class="c666">余额支付金额: ￥{{item.number}}</view>
					<view class="orgin">剩余余额: ￥{{item.balance}}</view>
				</view>
			</view>
		</template>
		<!-- 佣金明细 -->
		<template v-else>
			<view class="card" v-for="(item,index) of list" :key="index">
				<view class="fw-bt">
					<view class="f28 bold">{{item.title}}</view>
					
					<view class="bold f32 red" v-if="item.pm==1">+{{item.number}}</view>
					<view class="bold f32" v-else>-{{item.number}}</view>
				</view>
				<view class="two fw-bt f24">
					<view class="c999">{{item.create_time}}</view>
					<view class="status c999" v-if="item.mark">{{item.mark}}</view>
					<view class="status orgin" v-else>{{item.status=='0'?'审核中':item.status=='1'?'已通过':'已拒绝'}}</view>
				</view>
				<view class="desc f24" v-if="item.status=='-1'">已拒绝：提现通道出现了一点问题，提现失败</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				active: 0,
				nav_list: ['充值记录', '消费明细', '兑换记录'],
				list: [], //
				type: 1, //1.余额明细 2.佣金明细
			}
		},
		computed: {
			title1() {
				if (this.type == 1 && this.active == 0) {
					return '当前余额：';
				}
				if (this.type == 1 && this.active == 1) {
					return '订单号：';
				}
				if (this.type == 1 && this.active == 2) {
					return '兑换卡号：';
				}
			}
		},
		onLoad(options) {
			this.type = options.type || 1;
			if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: '奖金明细'
				})
			}
			if (this.type == 1) {
				this.getlist(this.page)
			}
			if (this.type == 2) {
				this.getlist2(this.page)
			}
		},
		onReachBottom() {
			if (this.type == 1) {
				this.getlist(this.page + 1)
			}
			if (this.type == 2) {
				this.getlist2(this.page + 1)
			}
		},
		methods: {
			getlist(e) {
				let type = this.active == 1 ? '1' : this.active == '0' ? '2' : 66
				let data = {
					page: e,
					limit: 10,
					type
				}
				this.$request('user/bill', data, 'GET').then(res => {

					if (res.status == 200) {
						if (e == 1) {
							this.list = res.data.list
						} else {
							if (res.data.list.length == 0) {
								uni.showToast({
									title: "暂无更多",
									icon: "none"
								})
								return
							}
							let list = this.list
							list = [...list, ...res.data.list]
							this.list = list
							this.page = e
						}
					}
				})
			},
			getlist2(e) {

				let data = {
					page: e,
					limit: 10,

				}
				this.$request('user/brokerage_list', data, 'GET').then(res => {
					if (res.status == 200) {
						if (e == 1) {
							this.list = res.data.list
						} else {
							if (res.data.list.length == 0) {
								uni.showToast({
									title: "暂无更多",
									icon: "none"
								})
								return
							}
							let list = this.list
							list = [...list, ...res.data.list]
							this.list = list
							this.page = e
						}
					}
				})
			},
			// 切换类型
			checkNav(index) {
				this.active = index
				this.page = 1
				this.getlist(this.page)
			},
			// 获得状态
			getStatusText(index) {
				if (index == 1) { //
					return '待付款'
				} else if (index == 2) { //
					return '已打款'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 30rpx;

		.nav {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;

			.title {
				height: 42rpx;
				position: relative;
				margin-right: 84rpx;
			}

			.nav-tag {
				position: absolute;
				bottom: -15rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 6rpx;
				background: #fff;
				border-radius: 3rpx;
			}

			.show {
				color: #333 !important;
				font-weight: bold !important;

				.nav-tag {
					background: #109C7A;
				}
			}
		}

		.orgin {
			color: #F45E14;
		}

		.card {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;

			.two {
				margin-top: 10rpx;
			}

			.desc {
				margin-top: 10rpx;
				color: #F45E14;
			}

			.four {
				margin-top: 10rpx;
			}
		}
	}
</style>
